<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./denglusty.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <div class="layout">
      <div class="slider">
        <div class="img"></div>
      </div>
      <div class="container">
        <div class="header">
          <div class="icon">
            <span class="iconsvg"></span>
            <span class="iconText"> 小米账号</span>
          </div>
          <div class=" text">
            <a href="" class="aItem">用户协议</a>
            <a href="" class="aItem">隐私政策</a>
            <a href="" class="aItem">帮助中心</a>
            |
            <select name="" id="" class="aItem">
              <option value="">中文简体</option>
            </select>
          </div>
        </div>
        <div class="form">
          <div class="card">
            <div class="content">
              <div class="tabList">
                <div>
                  <span class="loginText" @click="login" :style="{color:(islogin?'':'#838383')}">登录</span>
                  <span class="register" @click="register" :style="{color:(islogin?'':'black')}">注册</span>
                  <div class="line" :style="{marginLeft:(islogin?'':'80px')}">
                  </div>
                </div>
              </div>
              <div class="loginInput" v-if="islogin">
                <form action="">
                  <input type="text" class="input" placeholder="邮箱/手机号码/小米ID" v-model="account" required ><br />
                  <span style="color:#ff5c00 ;" v-if="Idinput">手机格式错误</span>
                  <input type="password" class="input password" placeholder="密码" v-model="password" required>
                  <input type="checkbox" class="agree"><span class="agreetext">已阅读并同意小米帐号 <a href="">用户协议</a> 和<a
                      href="">
                      隐私政策</a></span>
                </form>
                <button class="loginButton" @click="goLogin">登录</button>
                <div class="forget">
                  <span>忘记密码？</span>
                  <span>手机号登录</span>
                </div>
              </div>
              <div class="loginInput" v-if="!islogin">
                <form action="">
                  <select name="" id="" class="input" v-model="area">
                    <option :value="item.value" v-for="item in countries">{{item.name}}</option>
                  </select>
                  <input type="text" class="input password" placeholder="手机号" required v-model="phone" @blur="blur"
                    ref="phoneRef">
                  <span style="color:#ff5c00 ;" v-if="Verifiedbymobilephone">手机格式错误</span>
                  <div style="display: flex;"> <input type="text" required class="input password VerificationCode"
                      placeholder="请输入验证码" v-model="VerificationCode">
                    <button style="border: none;" ref="btn" class="Sendverificationcode" @click.prevent="sendCode">
                      {{this.time<=0?this.Sendverificationcode:this.time}}</button>
                  </div>
                  <input type="checkbox" class="agree"><span class="agreetext">已阅读并同意小米帐号 <a href="">用户协议</a> 和<a
                      href="">
                      隐私政策</a></span>
                </form>
                <button class="loginButton" @click="goRegister">注册</button>
                <span class="Fail">收不到验证码？</span>
                <div class="forget">
                  <span>忘记密码？</span>
                  <span>手机号登录</span>
                </div>
              </div>
            </div>
            <div class="other">
              <div class="OtherWays">其他方式登录</div>
              <div class="allotherIcon">
                <span class="otherIcon Alipay"></span>
                <span class="otherIcon wechat"></span>
                <span class="otherIcon qq"></span>
                <span class="otherIcon microblog"></span>
                <span class="otherIcon apple"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="copyRight">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</div>
      </div>
    </div>
  </div>
  </div>
<script>
    const app = Vue.createApp({
data() {
    return {
        
    }
},
    })
    app.mount('#app')
</script>
</body>

</html>